<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ code }} - {{ message }}</title>
    <link rel="icon" href="{{ url_for('static', path='favicon.svg') }}" type="image/x-icon">
    <link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
    <style>
        @-moz-keyframes rocket-movement { 100% {-moz-transform: translate(1200px,-600px);} }
        @-webkit-keyframes rocket-movement {100% {-webkit-transform: translate(1200px,-600px); } }
        @keyframes rocket-movement { 100% {transform: translate(1200px,-600px);} }
        @-moz-keyframes spin-earth { 100% { -moz-transform: rotate(-360deg); transition: transform 20s;  } }
        @-webkit-keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transition: transform 20s;  } }
        @keyframes spin-earth{ 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); transition: transform 20s; } }
        @-moz-keyframes move-astronaut { 100% { -moz-transform: translate(-160px, -160px);} }
        @-webkit-keyframes move-astronaut { 100% { -webkit-transform: translate(-160px, -160px);} }
        @keyframes move-astronaut{ 100% { -webkit-transform: translate(-160px, -160px); transform:translate(-160px, -160px); } }
        @-moz-keyframes rotate-astronaut { 100% { -moz-transform: rotate(-720deg);} }
        @-webkit-keyframes rotate-astronaut { 100% { -webkit-transform: rotate(-720deg);} }
        @keyframes rotate-astronaut{ 100% { -webkit-transform: rotate(-720deg); transform:rotate(-720deg); } }
        @-moz-keyframes glow-star {
            40% { -moz-opacity: 0.3;}
            90%,100% { -moz-opacity: 1; -moz-transform: scale(1.2);}
        }
        @-webkit-keyframes glow-star {
            40% { -webkit-opacity: 0.3;}
            90%,100% { -webkit-opacity: 1; -webkit-transform: scale(1.2);}
        }
        @keyframes glow-star{
            40% { -webkit-opacity: 0.3; opacity: 0.3;  }
            90%,100% { -webkit-opacity: 1; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); border-radius: 999999px;}
        }
        .spin-earth-on-hover{
            transition: ease 200s !important;
            transform: rotate(-3600deg) !important;
        }

        .bg-purple{
            background: url('{{ url_for('static', path='images/bg_404_500.png') }}');
            background-repeat: repeat-x;
            background-size: cover;
            background-position: left top;
            height: 100%;
            overflow: hidden;

        }

        .central-body {
            height: calc(100vh - 100px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .objects img{
            z-index: 90;
            pointer-events: none;
        }

        .object_rocket{
            z-index: 95;
            position: absolute;
            transform: translateX(-50px);
            top: 75%;
            pointer-events: none;
            animation: rocket-movement 200s linear infinite both running;
        }

        .object_earth{
            position: absolute;
            top: 20%;
            left: 15%;
            z-index: 90;
        }

        .object_moon{
            position: absolute;
            top: 12%;
            left: 25%;
        }

        .earth-moon{

        }

        .object_astronaut{
            animation: rotate-astronaut 200s infinite linear both alternate;
        }

        .box_astronaut{
            z-index: 110 !important;
            position: absolute;
            top: 60%;
            right: 20%;
            will-change: transform;
            animation: move-astronaut 50s infinite linear both alternate;
        }

        .stars{
            background: url('{{ url_for('static', path='images/overlay_stars.svg') }}');
            background-repeat: repeat;
            background-size: contain;
            background-position: left top;
        }

        .glowing_stars .star{
            position: absolute;
            border-radius: 100%;
            background-color: #fff;
            width: 3px;
            height: 3px;
            opacity: 0.3;
            will-change: opacity;
        }

        .glowing_stars {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        .glowing_stars .star:nth-child(1){
            top: 80%;
            left: 25%;
            animation: glow-star 2s infinite ease-in-out alternate 1s;
        }
        .glowing_stars .star:nth-child(2){
            top: 20%;
            left: 40%;
            animation: glow-star 2s infinite ease-in-out alternate 3s;
        }
        .glowing_stars .star:nth-child(3){
            top: 25%;
            left: 25%;
            animation: glow-star 2s infinite ease-in-out alternate 5s;
        }
        .glowing_stars .star:nth-child(4){
            top: 75%;
            left: 80%;
            animation: glow-star 2s infinite ease-in-out alternate 7s;
        }
        .glowing_stars .star:nth-child(5){
            top: 90%;
            left: 50%;
            animation: glow-star 2s infinite ease-in-out alternate 9s;
        }

        .title {
            font-weight: bold;
            font-size: var(--size-xxxxl);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .sub-title {
            font-size: var(--size-xl);
            margin: 10px 0;
        }

        .sub-title2 {
            font-size: var(--size-xl);
            margin: 10px 0;
        }

        .request-id {
            margin: 10px 0;
        }

        .buttons {
            margin: 10px 0;
        }

        .trace-error, .previous-page {
            border: 1px solid white;
            font-size: var(--size-l);
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 5px;
            display: inline-block;
        }

        .shadow-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.5);
            z-index: 9999;
        }

        .debug-info {
            z-index: 10000;
            width: 60vw;
            height: 80vh;
            position: fixed;
            top: 10vh;
            left: 20vw;
            background-color: #fff;
            color: #4e4e4e;
            font-size: var(--size-m);
            overflow: none;
        }
        .debug-info .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 8px;
            border-bottom: 1px solid #ccc;
            background-color: #f2f2f2;
            height: 30px;
        }
        .debug-info .header .title {
            font-size: var(--size-m);
            font-weight: normal;
        }
        .debug-info .header .close-btn {
            cursor: pointer;
        }
        .debug-info .header .close-btn:hover {
            color: #ff6985;
        }
        .debug-info .content {
            padding: 6px 8px;
            overflow-y: auto;
        }
        .debug-info .content table {
            width: 100%;
        }
        .debug-info .content table, td, th{
            border: 1px solid black;
            border-collapse: collapse;
            padding: 8px;
        }
        .debug-info .content .code-block pre{
            height: calc(80vh - 215px);
        }
    </style>
    {% if debug %}
    <link rel="stylesheet" href="{{ url_for('static', path='libs/prism/prism.css') }}">
    {% endif %}
</head>
<body class="bg-purple">
<div class="stars">
    <div class="central-body">
        <div class="title">{{ code }}</div>
        <div class="request-id">REQUEST ID: {{ request_id }}</div>
        <div class="sub-title">{{ message }}</div>
        <div class="sub-title2">LOOKS LIKE YOU ARE LOST IN SPACE</div>
        <div class="buttons">
            {% if debug %}
            <div class="trace-error">追踪错误</div>
            {% endif %}
            <div class="previous-page">返回 →</div>
        </div>
    </div>
    <div class="objects">
        <img class="object_rocket" src="{{ url_for('static', path='images/rocket.svg') }}" width="40px">
        <div class="earth-moon">
            <img class="object_earth" src="{{ url_for('static', path='images/earth.svg') }}" width="100px">
            <img class="object_moon" src="{{ url_for('static', path='images/moon.svg') }}" width="80px">
        </div>
        <div class="box_astronaut">
            <img class="object_astronaut" src="{{ url_for('static', path='images/astronaut.svg') }}" width="140px">
        </div>
    </div>
    <div class="glowing_stars">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
    </div>
    {% if debug %}
    <div class="shadow-overlay" style="display: none;"></div>
    <div class="debug-info" style="display: none;">
        <div class="header">
            <div class="title">Debug Info</div>
            <div class="close-btn">✕</div>
        </div>
        <div class="content">
            <table>
                <tr>
                    <td>Request ID:</td>
                    <td colspan="3">{{ request_id }}</td>
                </tr>
                <tr>
                    <td>Error Code:</td>
                    <td>{{ error_code }}</td>
                    <td>Time:</td>
                    <td>{{ time }}</td>
                </tr>
                <tr>
                    <td>Message:</td>
                    <td colspan="3">{{ error_message }}</td>
                </tr>
                <tr>
                    <td>Data:</td>
                    <td colspan="3">{{ error_data }}</td>
                </tr>
            </table>
            <div class="code-block">
                <pre><code class="language-json5">{{ error_detail }}</code></pre>
<!--                <pre><code class="language-json5">1111</code></pre>-->
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', path='libs/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static', path='libs/prism/prism.js') }}"></script>
    <script>
        $(".previous-page").click(function() {
            window.history.back();
        })

        $(".trace-error").click(function() {
            $(".shadow-overlay").fadeIn(200);
            $(".debug-info").fadeIn(200);
        })

        $(".debug-info .close-btn, .shadow-overlay").click(function() {
            $(".shadow-overlay").fadeOut(200);
            $(".debug-info").fadeOut(200);
        })
    </script>
    {% endif %}
</div>
</body>
</html>